<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="../assets/js/views/vue.min.js"></script>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">

    <script src="${js}/jquery-1.9.1.min.js"></script>
    <%--<link rel="stylesheet" href="${frames}/css/table.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">--%>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--%>
    <%--<link rel="stylesheet" href="../assets/css/bootstrapDatepickr-1.0.0.css">--%>
    <%--<script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>--%>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <%--<script src="${assets}/js/views/bpAbnormal.js"></script>--%>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <%--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>--%>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            width:98%;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
            margin-top:0 !important
        }
        #main{
            width:470px;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }
        #main label{
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            width:120px;
            display:inline-block;
        }
        #main div{
            margin-bottom:20px;
        }
        .input{
            width: 260px;
            line-height: 19px;
            border: solid 1px #d0d0d0;
            display:inline-block;
            margin-left:16px;
            font-family: MicrosoftYaHei;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #999999 !important;
        }
        .bootstrapDatepickr-cal{
            top:250px !important;
        }
        .change{
            width:300px;
            margin:0 auto;
            margin-top:50px;
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
            margin-top:15px;
        }
        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        #keep{
            background:#35acfd !important;
        }
        /*.bootstrapDatepickr-cal{*/
        /*left:265px !important;*/
        /*}*/
        #beginDate{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            font-size:15px;
            color:#999999 !important
        }
        .date div{
            margin-bottom:0 !important
        }
        .header{
            width:100%;
            overflow:hidden
        }
        #main input{
            text-indent:0.3em
        }
        .defualt{
            border:1px solid red !important;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>修改用药信息</h1>
</div>
<div id="main">
    <div class="name">
        <label  style="margin-right:16px;">药名</label>
        <select name="" class="form-control input" style="width:260px !important;margin-left:14px !important" id="testName" multiple="">
            <%--<option :selected="item.selected" v-for="item in medicalname" :title="item.id">{{item.name}}</option>--%>
                <option value=""></option>
        </select>
    </div>
    <div class="number">
        <label>数量（剂量）</label>
        <input id="number" type="text"  placeholder="输入数量" class="form-control input" onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')">
    </div>
    <div class="spec">
        <label>规格</label>
        <input type="text" placeholder="请输入规格" id="medicalSpecs" class="form-control input">
    </div>
    <div class="times">
        <label>频度（次数）</label>
        <input id="rate" type="text"  placeholder="输入频率" class="form-control input">
    </div>
    <div>
        <label>用法</label>
        <select name="" id="useType" class="form-control input">
            <option value="">请选择</option>
            <option value="1">口服</option>
            <option value="2">皮下注射</option>
            <option value="3">肌肉注射</option>
            <option value="0">其他</option>
        </select>
    </div>
    <div>
        <label>开立时间</label>
        <div style="width:260px;display:inline-block;vertical-align: top;margin-left:17px;">
            <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                <input readonly="readonly" id="beginDate" type="text" class="form-control lay-date" placeholder="选择时间" style="text-indent:0em;">
            </div>
        </div>
    </div>
    <div>
        <div class="form-group submitBtn" style="text-align: center ">
            <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                关闭
            </button>
            <button type="submit" class="btn" id="keep"  @click="keep()" style="margin-left:20px;">保存</button>
        </div>
    </div>
</div>

<script>
    var vm = new Vue({
        el:"#main",
        data:{
            // 药名
            medicalname:"",
            // 频度
            value:"",
            // 药品规格
            specs:"",
            medicalSpecs:'',
            medicalFrequency:'',
            numbers:'',
            time:'',
            id:'',
            idcard:'',
            diseasesType:'',
            urlLib:'',
            refreshto:'',
            recordTime:''
        },
        mounted(){
            //初始化获取数据
            // 获取用药名称
            let that = this;
            var url = decodeURI(decodeURI(location.search))
            var arr = url.split('?')[1]
            var arr1 = arr.split('&');
            console.log(arr1)
            var medicalFrequency = arr1[3].split('=')[1]
            var medicalId = arr1[1].split('=')[1]
            var numbers = arr1[4].split('=')[1]
            that.recordTime = arr1[7].split('=')[1]
            $('#beginDate').val(that.recordTime+' '+'00:00:00')
            $('#number').val(numbers)
            var idCard = arr1[2].split('=')[1]
            var id = arr1[0].split('=')[1]
            var medicalname = arr1[5].split('=')[1];
            that.diseasesType = arr1[6].split('=')[1];
            var medicalId = arr1[1].split('=')[1]
            console.log(medicalId)
            $('#rate').val(medicalFrequency)
            that.id = id
            that.idcard = idCard;
            var medicalSpecs = arr1[8].split('=')[1]
            $('#medicalSpecs').val(medicalSpecs)
            var userType = arr1[9].split('=')[1];
            $('#useType').val(userType)
            console.log(medicalId)
            $.ajax({
                url:"${URL_INDEX_SELECTMEDICALNAME}",
                type:'post',
                data:{
                    acronym:'',
                    medicalName:''
                },
                dataType: "json",
                success:function(data){
                    var arr = [];
                    data.data.forEach((item,index)=>{
                        arr.push({
                            id:item.id,
                            text:item.name
                        })
                    })
                    that.medicalname = arr;
                    $("#testName").select2({
                        language: 'zh-CN',
                        maximumSelectionLength: 1, //最多能够选择的个数
                        data: that.medicalname
                    })
                    $("#testName").val(medicalId).trigger('change')
                }
            })
            $.ajax({
                url:"${URL_SCREENING_GETBREADLINE}",
                dataType:'json',
                type:'post',
                success:function(data){
                    that.urlLib = JSON.parse(data.data)
                    that.refreshto = that.urlLib[that.urlLib.length-1].href
                }
            })
            var inputs = $('input')
            for( var a = 0; a < inputs.length; a++ ){
                $(inputs[a]).bind('change',function(){
                    if( $(this).val() != '' ){
                        $(this).removeClass('defualt')
                    }
                })
            }
        },
        methods:{
            closeFrame : function() {
                window.parent.simpleCloseModal();
            },
            keep:function(){
                // 获取当前输入框的所有数据
                // 获取病人id
                let that = this;
                that.numbers = $("#number").val();
                that.medicalName = $('#testName option:selected').val();
                console.log(that.medicalName)
                that.medicalSpecs = $('#medicalSpecs').val()
                that.medicalFrequency = $('#rate').val();
                that.recordTime = $('#beginDate').val()
                if( that.medicalName != '' && that.medicalSpecs != "选择规格" && that.medicalFrequency != "选择频度" && that.numbers != "" && that.recordTime != '' ){
                    $.ajax({
                        url:"${URL_PATIENT_UPDATEMEDICAL}",
                        dataType:"json",
                        type:"post",
                        data:{
                            id :that.id,
                            useType:$('#useType option:selected').val(),
                            medicalFrequency:that.medicalFrequency,
                            medicalId:that.medicalName,
                            numbers:that.numbers,
                            medicalSpecs:that.medicalSpecs,
                            recordTime:that.recordTime
                        },
                        success:function(data){
                            if( data.success ){
                                // 刷新当前页面
                                parent.showSrc(that.refreshto)
                                that.closeFrame()
                            }
                        }
                    })
                }else{
                    var inputs = $('input')
                    var arr = []
                    var arr1 = []
                    if( !that.medicalName ){
                        $('#testName').addClass('defualt')
                        arr1.push($('#testName'))
                    }
                    for( var a = 0; a < inputs.length; a++ ){
                        if( $(inputs[a]).val() === '' ){
                            $(inputs[a]).attr('placeholder','请输入数值')
                            $(inputs[a]).addClass('defualt')
                            arr.push($(inputs[a]))
                        }
                    }
                    if( arr1[0] ){
                        arr1[0].focus()
                        $(arr1[0]).removeClass('defualt')
                    }else{
                        arr[0].focus()
                        $(arr[0]).removeClass('defualt')
                    }
                }
            }
        }
    })

    function initLayDate(id) {
        laydate({
            elem: id,
            istime: true,
            format: 'YYYY-MM-DD hh:mm:ss',
            choose: function (dates) { //选择好日期的回调
                // initTablePatient();
            }
        })
    }
    $(document).ready(function() {
        initLayDate('#beginDate');
    });
</script>
</body>
</html>

